<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .box01 {
            font-size: 12px;
            width: 20em;
            height: 10em;

            background-color: gold;
        }

        .box02 {
            font-size: 20px;
            width: 20em;
            height: 10em;

            background-color: green;
        }
        p{
            font-size: 20px;
            text-indent: 2em;
            line-height: 1.25rem;
        }
    </style>
</head>

<body>
    <div class="box01"></div>
    <br />
    <br />

    <div class="box02"></div>
    <p>首先了解em单位，em单位是参照元素自身的文字大小来设置尺寸，
        rem指的是参照根节点的文字大小，根节点指的是html标签，设置html标签的文字大小，
        其他的元素相关尺寸设置用rem，这样，所有元素都有了统一的参照标准，改变html文字的大小，
        就会改变所有元素用rem设置的尺寸大小。
    </p>

</body>

</html>